import React, { useState, useEffect, useRef } from 'react'
import { Card, Space } from 'antd'
import { TimelineCanvas, TimelineCanvasRef } from './TimelineCanvas'
import { TimelineToolbar } from './TimelineToolbar'
import { TimelineLayoutCalculator } from './TimelineLayoutCalculator'
import { TimelineStatistics } from './types'
import { StoryboardScene } from '../../../types/document'

export interface TimelineViewProps {
  scenes: StoryboardScene[]
  selectedSceneId: string | null
  onSceneSelect: (sceneId: string | null) => void
  onSceneReorder: (fromIndex: number, toIndex: number) => void
  className?: string
  style?: React.CSSProperties
}

/**
 * 时间线视图主组件
 * 集成Canvas、工具栏和统计信息
 */
export const TimelineView: React.FC<TimelineViewProps> = ({
  scenes,
  selectedSceneId,
  onSceneSelect,
  onSceneReorder,
  className,
  style
}) => {
  const canvasRef = useRef<TimelineCanvasRef>(null)
  const layoutCalculator = useRef(new TimelineLayoutCalculator())
  
  // 统计数据
  const [statistics, setStatistics] = useState<TimelineStatistics>({
    totalDuration: 0,
    sceneCount: 0,
    averageDuration: 0,
    longestScene: null,
    shortestScene: null
  })
  
  // 缩放状态
  const [zoomInfo, setZoomInfo] = useState({
    level: 1,
    name: '标准',
    description: '1:5',
    canZoomIn: true,
    canZoomOut: true
  })
  
  // 计算统计数据
  useEffect(() => {
    const newStatistics = layoutCalculator.current.calculateStatistics(scenes)
    setStatistics(newStatistics)
  }, [scenes])
  
  // 缩放控制方法
  const handleZoomIn = () => {
    canvasRef.current?.zoomIn()
  }
  
  const handleZoomOut = () => {
    canvasRef.current?.zoomOut()
  }
  
  const handleZoomToFit = () => {
    canvasRef.current?.zoomToFit()
  }
  
  // 滚动到指定场景
  const scrollToScene = (sceneId: string) => {
    canvasRef.current?.scrollToScene(sceneId)
  }
  
  // 当选中场景变化时，滚动到该场景
  useEffect(() => {
    if (selectedSceneId) {
      scrollToScene(selectedSceneId)
    }
  }, [selectedSceneId])
  
  return (
    <Card 
      title="时间线视图"
      variant="borderless"
      className={`timeline-view ${className || ''}`}
      style={{
        width: '100%',
        ...style
      }}
    >
      <Space direction="vertical" size="middle" style={{ width: '100%' }}>
        {/* 工具栏 */}
        <TimelineToolbar
          statistics={statistics}
          onZoomIn={handleZoomIn}
          onZoomOut={handleZoomOut}
          onZoomToFit={handleZoomToFit}
          canZoomIn={zoomInfo.canZoomIn}
          canZoomOut={zoomInfo.canZoomOut}
          currentZoomLevel={`${zoomInfo.name} (${zoomInfo.description})`}
        />
        
        {/* 时间线Canvas */}
        <TimelineCanvas
          ref={canvasRef}
          scenes={scenes}
          selectedSceneId={selectedSceneId}
          onSceneSelect={onSceneSelect}
          onSceneReorder={onSceneReorder}
        />
        
        {/* 提示信息 */}
        {scenes.length === 0 && (
          <div 
            style={{ 
              textAlign: 'center', 
              padding: '40px', 
              color: '#999',
              fontSize: '14px'
            }}
          >
            暂无场景数据，请先在场景编辑器中创建场景
          </div>
        )}
      </Space>
    </Card>
  )
}

export default TimelineView